import {
  AddCircleOutline,
  CalculatorOutline,
  BillOutline,
} from "antd-mobile-icons";
import { TabBar } from "antd-mobile";
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

import "./index.scss";
const tabs = [
  {
    key: "/",
    title: "月账单",
    icon: <BillOutline />,
  },
  {
    key: "/new",
    title: "记账",
    icon: <AddCircleOutline />,
  },
  {
    key: "/year",
    title: "年账单",
    icon: <CalculatorOutline />,
  },
]
export default function MyTabBar() {
  const navigate = useNavigate();
  // const [activeKey, setActiveKey] = useState(tabs[0].key)
  const goPage = (path) => {
    console.log(path)
    // setActiveKey(path)
    navigate(path);
  };
  return (
    <>
    <div className="footer">
      <TabBar onChange={goPage}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
    </>
  );
}
